<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            width: 50px;
            height: 50px;
            line-height: 50px;
            border: 1px solid #333;
            text-align: center;
            list-style: none;
            background-color: chocolate;
        }

        .header .active {
            background-color: rgb(97, 24, 192);
            color: #FFF;
            transition: 1s;
        }

        .header {
            display: flex;
        }

        .box .active {
            display: block;
        }

        .box div {
            display: none;
            color: blueviolet;
        }
    </style>

<body>
    <nav class="container">
        <ul class="header">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <div class="box">
            <div class="active">111</div>
            <div>222</div>
            <div>3333</div>
            <div>444</div>
            <div>555</div>
        </div>
    </nav>
    <script>
        /**
        * @func Tabs切换
        * @desc 构造器函数的tabs方法切换 selectors(节点名称,事件类型)
        * @param {String,String}
        * @return {}
        */
        class Tabs {
            constructor(selectors, type = "click") {
                this.selector = document.querySelector(selectors);
                this.headerItems = this.selector.querySelectorAll(".header li")
                this.boxItems = this.selector.querySelectorAll('.box div')
                this.type = type
                this.change()
            }
            change() {
                for (let index = 0; index < this.headerItems.length; index++) {
                    this.headerItems[index].addEventListener(this.type, () => {
                        this.headerItems.forEach((item, j) => {
                            this.headerItems[j].classList.remove('active')
                            this.boxItems[j].classList.remove('active')
                        })
                        this.headerItems[index].classList.add('active')
                        this.boxItems[index].classList.add('active')
                    }, false)
                }
            }
        }
        new Tabs('.container', "mousemove")
    </script>
</body>

</html>